<template>
	<view>
		<!-- 刘海、雨滴屏留空 -->
		<view class="system-bar bg-orange "> </view>

		<!-- 顶部搜索栏 SSSSSS -->
		<view class="cu-bar bg-orange search">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="请输入商品名称"
				 confirm-type="search"></input>
			</view>
			<view class="action">
				<text class="cuIcon-scan" style="font-size: 160%;"></text>
			</view>
		</view>
		<!-- 顶部搜索栏 EEEEEE -->

		<!-- 顶部标签页 SSSSSS -->
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view v-for="(item, index) in tabList" :key="index" class="cu-item flex-sub" :class="index==tabCurrent?'text-orange cur':''"
				 @tap="tabSelect(index)">
					{{item}}
				</view>
			</view>
		</scroll-view>
		<!-- 顶部标签页 EEEEEE -->

		<!-- 轮播图 SSSSSS -->
		<swiper style="margin-top: 3upx; height: 390upx;" class="square-dot" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500">
			<!-- 注意图片和轮播图高度设置，本设置可以保证图片宽度撑满，高度自适应 -->
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image class="swiper-img" :src="item.url" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<!-- 轮播图 EEEEEE -->

		<!-- 众筹标题栏 SSSSSS -->
		<view class="bg-white zhongchou">
			<view style="display: flex; align-items: center;">
				<image src="../../static/icon/cart.png" style="width: 50upx; height: 50upx;"></image>
				<text style="font-weight: bold; font-size: 110%; padding-left: 15upx;">众筹</text>
			</view>
			<view class="text-gray">查看全部<text class="cuIcon-right"></text></view>
		</view>
		<!-- 众筹标题栏 EEEEEE -->

		<!-- 众筹下方图标列表 SSSSSS -->
		<view class="index-item-father bg-white">
			<view class="index-item" v-for="(item,index) in indexItemList" :key="index">
				<image :src="item.url"></image>
				<view style="text-align: center;">{{item.name}}</view>
			</view>
		</view>
		<!-- 众筹下方图标列表 EEEEEE -->

		<!-- 大牌补贴标题栏 SSSSSS -->
		<view class="bg-white zhongchou">
			<view class="flex align-center">
				<image src="../../static/index_item/钱包.png" style="width: 50upx; height: 50upx;"></image>
				<text style="font-weight: bold; font-size: 110%; mar-left: 15upx;">大牌补贴</text>
				<view class="cu-tag radius" style="margin-left: 20upx;">大牌正品 官方补贴</view>
			</view>
			<view class="text-gray">查看全部<text class="cuIcon-right"></text></view>
		</view>
		<!-- 大牌补贴标题栏 EEEEEE -->

		<!-- 大牌补贴 SSSSSS -->
		<view class="flex justify-around bg-white" style="padding:0upx 20upx 10upx;">
			<view class="" v-for="(i,index) in 5" :key="index">
				<view class="flex justify-center" style="position: relative;">
					<image src="../../static/goods/mi10.jpg" style="width: 120upx; height: 120upx;"></image>
					<view class="cu-tag sm bg-red" style="position: absolute; bottom: 3upx;">特价</view>
				</view>
				<view style="color: red; text-align: center;">
					<text style="font-size: 60%;">￥</text>
					<text>3999</text>
				</view>
			</view>
		</view>
		<!-- 大牌补贴 EEEEEE -->

		<!-- 商品列表 SSSSSS -->
		<view style="margin-top: 20upx;">
			<view v-for="(item,index) in 4" :key="index" class="flex justify-around bg-white" style="padding: 20upx 20upx 20upx 20upx;">
				<view style="width: 300upx;">
					<image src="../../static/goods/blm.webp" style="width: 280upx; height: 280upx;"></image>
				</view>
				<view style="width: 400upx; flex-direction: column; border-bottom: 0.5upx solid #E7E7E7;" class="flex justify-between">
					<view>
						<view style="font-weight:bold; font-size: 110%;">
							<text class="cu-tag bg-gradual-orange round sm">女神节</text>
							<text>小米10震撼发布 现摘菠萝蜜 不甜不要钱</text>
						</view>
						<view class="cu-tag bg-brown radius">菠萝蜜旗舰店</view>
					</view>
					<view>
						<view style="margin-bottom: 3upx;">
							<text class="cu-tag radius bg-red">小编推荐</text>
							<text class="cu-tag radius bg-orange">极速退款</text>
						</view>
						<view>
							<text style="font-size: 120%;" class="text-red">￥</text>
							<text style="font-size: 150%;" class="text-red">12.6</text>
							<text style="font-size: 120%; margin-left:5upx;" class="text-gray">已买1.1万件</text>
						</view>
						<view style="width: 100%; height: 10upx;"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品列表 EEEEEE -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: ["热门", "水果", "蔬菜", "肉类", "众筹"],
				tabCurrent: 0,
				swiperList: [{
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
				}, {
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99007.jpg'
				}, {
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99005.jpg'
				}],
				indexItemList: [{
					name: '彩妆',
					url: '../../static/index_item/彩妆.png'
				}, {
					name: '家具',
					url: '../../static/index_item/家具.png'
				}, {
					name: '粉刷',
					url: '../../static/index_item/粉刷.png'
				}, {
					name: '礼品',
					url: '../../static/index_item/礼品.png'
				}, {
					name: '行李箱',
					url: '../../static/index_item/行李箱.png'
				}, ]
			}
		},
		methods: {
			tabSelect(index) {
				this.tabCurrent = index
			}
		}
	}
</script>

<style>
	.system-bar {
		height: var(--status-bar-height);
	}

	.swiper-img {
		width: 100%;
	}

	.zhongchou {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100upx;
		padding-left: 20upx;
		padding-right: 20upx;
		margin-top: 15upx;
	}

	.index-item-father {
		display: flex;
		justify-content: space-around;
		padding-bottom: 20upx;
	}

	.index-item image {
		width: 80upx;
		height: 80upx;
		text-align: center;
	}
</style>
